<template>
  <div class="memberDetails">
    <div class="memberDetails-header">
      <van-tabs v-model="active" swipeable>
        <van-tab v-for="(v,index) in tab" :key="index" :title="v.title">

          <div class="memberDetails-switch"></div>
        </van-tab>
      </van-tabs>
    </div>


    <div class="content1" :style="{display:contents1}">
      <div class="content1Loading" :style="{display:content1Loading}">
        <van-loading class="content1-loading" type="spinner" color="black"/>
      </div>


      <van-row style="padding:10px 0;background: #fff;">
        <van-col span="6">

          <img v-if="memberInfo.photos==1" class="imgDiv" src="../../images/noimg.jpg" alt="">

          <img v-else class="imgDiv" :src="memberInfo.photo">
        </van-col>
        <van-col span="9">
          <p class="list-p">
            <i class="iconfont icon-yonghu1"></i>:{{memberInfo.vip_name}}
          </p>
          <p class="list-p">
            <i class="iconfont icon-shouji1"></i>:{{memberInfo.phone}}
          </p>
        </van-col>
        <van-col span="9">
          <p class="list-p">
            <i class="iconfont icon-huiyuanshengritixing"></i>:{{memberInfo.birth_date}}
          </p>
          <p class="list-p">
            <i class="iconfont icon-dengji"></i>:{{memberInfo.level_name}}
          </p>
        </van-col>
      </van-row>
      <div class="parentTab">
        <div class="one" :style="{width:widths}" @click="balabceFn">
          存款余额
          <p :style="{color:color}">{{deposit}}</p>
        </div>
        <div class="one" :style="{width:widths}" @click="rechargeFn">
          充值余额
          <p :style="{color:color}">{{vip_assets_czkje}}</p>
        </div>
        <div class="one" :style="{width:widths}" @click='pathIntegration'>
          积分余额
          <p :style="{color:color}">{{integration}}</p>
        </div>
        <div :style="{width:widths}" class="one " @click="reappearanceFn">
          返现余额
          <p :style="{color:color}">{{jffxye}}</p>
        </div>

        <div class="one lastOne" :style="{width:widths}" @click="growthFn">
          成长值
          <p :style="{color:color}">{{memberInfo.exp}}</p>
        </div>
      </div>

      <van-cell-group style='margin-top:20px;'>
        <van-cell v-if="memberInfo.discount<=0" title="会员折扣" value="0折"/>
        <van-cell v-else title="会员折扣" :value="memberInfo.discount+'折'"/>
        <van-cell title="生日" :value="memberInfo.birth_date"/>
        <van-cell v-if="!memberInfo.height" title="身高" value="0cm"/>
        <van-cell v-else title="身高" :value="memberInfo.height+'cm'"/>
        <van-cell title="尺码" v-if="memberInfo.nickname==''" value="未填写"/>
        <van-cell title="尺码" v-else :value="memberInfo.nickname"/>
        <van-cell title="体重" :value="memberInfo.weight"/>
        <van-cell title="地址" :value="memberInfo.regions_name"/>
        <van-cell title="详细地址" :value="memberInfo.address"/>
        <van-cell title="星座" :value="memberInfo.zodiac_name"/>

        <p class="memberDetails-title">消费时间记录</p>
        <van-cell title="首次购买日期" :value="memberInfo.first_date"/>
        <van-cell title="最后购买日期" :value="memberInfo.last_date"/>
        <van-cell title="最后回访日期" :value="memberInfo.vip_trade_zhhf"/>

        <p class="memberDetails-title">积分返现情况</p>
        <van-cell title="累计积分返现次数" :value="memberInfo.vip_assets_jffxhdcs+'次'"/>
        <van-cell title="累计积分返现额" :value="memberInfo.vip_assets_ljjffx"/>
        <van-cell title="积分返现余额" :value="jffxye"/>

        <p class="memberDetails-title">退货存款情况</p>
        <van-cell title="累计退货单数" :value="Math.abs(memberInfo.rt_order_cumu)+'单'"/>
        <van-cell title="累计退货件数" :value="Math.abs(memberInfo.rt_number_cumu)+'件'"/>
        <van-cell title="累计退货金额" :value="Math.abs(memberInfo.rt_money_cumu)+'元'"/>

        <van-cell title="累计存款使用次数" :value="memberInfo.vip_assets_cksycs"/>
        <van-cell title="累计存款获得次数" :value="memberInfo.vip_assets_ckhdcs"/>
        <van-cell title="目前存款" :value="deposit"/>


        <p class="memberDetails-title">本轮消费情况</p>
        <van-cell title="累计购买轮次" :value="memberInfo.vip_trade_ljgmlc"/>
        <van-cell title="本轮购买件数" :value="memberInfo.vip_trade_blgmjs+'件'"/>
        <van-cell title="本轮购买金额" :value="memberInfo.vip_trade_blgmje+'元'"/>
        <van-cell title="本轮获得积分" :value="memberInfo.integral+'分'"/>

        <p class="memberDetails-title">电子券发放情况</p>
        <van-cell title="累计发放次数" :value="memberInfo.vip_assets_dzqljffcs+'次'"/>
        <van-cell title="累计使用次数" :value="memberInfo.vip_assets_dzqljsycs+'次'"/>
        <van-cell title="优惠券累计发放金额" :value="memberInfo.vip_assets_dzqljffje+'元'"/>
        <van-cell title="优惠券累计使用金额" :value="memberInfo.vip_assets_dzqljsyje+'元'"/>
        <van-cell title="折扣券累计发放张数" :value="memberInfo.vip_assets_dzqljffzs+'张'"/>
        <van-cell title="折扣券累计使用张数" :value="memberInfo.vip_assets_dzqljsyzs+'张'"/>

        <p class="memberDetails-title">维系记录</p>
        <van-cell title="积分清零次数" :value="memberInfo.vip_assets_jfqlcs+'次'"/>
        <van-cell title="电话维系次数" :value="memberInfo.vip_assets_dhwxcs+'次'"/>
        <van-cell title="短信维系次数" :value="memberInfo.vip_assets_dxwxcs+'次'"/>
        <van-cell title="微信维系次数" :value="memberInfo.vip_assets_wxwxcs+'次'"/>

        <p class="memberDetails-title">累计消费情况</p>
        <van-cell title="累计购买次数" :value="memberInfo.order_cumu+'次'"/>
        <van-cell title="累计购买件数" :value="memberInfo.number_cumu+'件'"/>
        <van-cell title="累计购买金额" :value="memberInfo.money_cumu+'件'"/>
        <van-cell title="累计获得积分" :value="memberInfo.vip_trade_ljhdjf+'分'"/>
        <van-cell title="联单系数" :value="memberInfo.vip_trade_ldxs"/>
        <van-cell title="衣单系数" :value="memberInfo.vip_trade_ydxs"/>

        <p class="memberDetails-title">充值款情况</p>
        <van-cell title="累计充值次数" :value="memberInfo.vip_assets_czkczcs+'次'"/>
        <van-cell title="累计充值金额" :value="memberInfo.vip_assets_czkje+'元'"/>
        <van-cell title="充值款余额"
                  :value="(parseFloat(memberInfo.vip_assets_czkje)-parseFloat(memberInfo.vip_assets_czksyje))"/>
        <van-cell title="充值款折扣" :value="memberInfo.vip_assets_czkzk"/>
        <p class="memberDetails-title">折扣情况</p>
        <van-cell title="平均折扣" :value="memberInfo.vip_trade_pjzk+'折'"/>


        <!--<van-cell  title="最高购买件数" :value="memberInfo.number_max+'件'" />-->
        <!--<van-cell  title="累计退货单数" :value="Math.abs(memberInfo.rt_order_cumu)+'单'" />-->
        <!--<van-cell  title="累计退货件数" :value="Math.abs(memberInfo.rt_number_cumu)+'件'" />-->
        <!--<van-cell  title="累计订单数" :value="memberInfo.order_cumu+'单'" />-->
        <!--<van-cell  title="累计购买件数" :value="memberInfo.number_cumu+'件'" />-->
        <!--<van-cell  title="累计购买金额" :value="memberInfo.money_cumu+'元'" />-->
        <!--<van-cell  title="累计退货金额" :value="Math.abs(memberInfo.rt_money_cumu)+'元'" />-->
        <!--<van-cell  title="累计存款额" :value="memberInfo.deposit_cumu+'元'" />-->
      </van-cell-group>


    </div>

    <div class="content2" :style="{display:contents2}">
      <!--{{consumption}}-->
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="offset"
        @load="consumptionFn"
      >

        <div v-if="typeof consumption=='string'" style="padding:10px 0;color:#ccc;"><p>{{consumption}}</p></div>
        <div v-else class="lists" v-for="(val,idx) in consumption" :key="idx">
          <!--消费购买-->
          <div v-if="val.buynum>0">
            <!--<van-row >
              <van-col span="24" style="text-align:left;padding:5px 0 5px 10px;">
                {{val.tocollect.sale_date}}
              </van-col>
              <van-col span="24" style="text-align:left;padding:0 0 3px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                消费分店:{{getDianCang(val.store_id).name}}
                【
                <span v-if="val.tocollect.employee_name==''" style="color:#ddd">无</span>
                <span v-else>{{val.tocollect.employee_name}}</span>
                】
                </van-col>
              <van-col span="6" style='padding-left:10px;padding-top:5px;text-align: left'>
                <img v-if="getGoods(val.sku_id).images.length==0" class="xfimgDiv" src="../../images/noimg.jpg" alt="">
                <img v-else class="xfimgDiv" :src="memberDetails.imgaes+getGoods(val.sku_id).images" alt="">

              </van-col>
              <van-col span="18" style='padding:0 10px;'>
                <van-row>
                  <van-col span="20" style="text-align: left;padding:5px 0;color:#000;font-size:14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    商品:{{getGoods(val.sku_id).goods.title}}
                  </van-col>
                  <van-col span="4" style="text-align: right;padding:5px 0;font-size:14px;">
                    <span>X{{val.buynum}}</span>
                  </van-col>
                  <van-col span="12" style="text-align: left;padding:3px 0;">
                    折扣:{{val.discount}}
                  </van-col>
                  <van-col span="12" style="text-align: right;padding:3px 0;">
                    <span style="color:#01A761!important;">￥{{val.should_income}}</span>
                  </van-col>
                  <van-col span="24" style="text-align: left;padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    规格:【<span  v-for="(item,v) in getGoods(val.sku_id).spec_data">{{v}}:{{item}} </span>】
                  </van-col>
                  &lt;!&ndash;<van-col span="24" style="text-align: left;padding:3px 0;">&ndash;&gt;
                    &lt;!&ndash;积分:{{val.integral}}分&ndash;&gt;
                  &lt;!&ndash;</van-col>&ndash;&gt;
                </van-row>
              </van-col>

            </van-row>-->


            <van-row>
              <van-col span="24" style="text-align:left;padding:5px 0 5px 10px;">
                {{val.tocollect.sale_date}}
              </van-col>
              <van-col span="24"
                       style="text-align:left;padding:0 0 3px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                消费分店:{{getDianCang(val.store_id).name}}
                【
                <span v-if="val.tocollect.employee_name==''" style="color:#ddd">无</span>
                <span v-else>{{val.tocollect.employee_name}}</span>
                】
              </van-col>
              <van-col span="24"
                       style="text-align:left;padding:0 0 3px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                订单号:{{val.tocollect.order_num}}
              </van-col>
              <van-col span="18" style="display: flex;padding:10px;">
                <img v-if="getGoods(val.sku_id).images.length==0" class="xfimgDiv" src="../../images/noimg.jpg" alt="">
                <img v-else class="xfimgDiv" :src="memberDetails.imgaes+getGoods(val.sku_id).images" alt="">
                <div class="xf-text">
                  <van-row>
                    <van-col span="20" class="memberDetails-c2-names">
                      商品:{{getGoods(val.sku_id).goods.title}}
                    </van-col>

                    <van-col span="12" style="text-align: left;padding:3px 0;">
                      折扣:{{val.discount}}
                    </van-col>

                    <van-col span="24"
                             style="text-align: left;padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                      规格:【<span v-for="(item,v) in getGoods(val.sku_id).spec_data">{{v}}:{{item}} </span>】
                    </van-col>
                    <!--<van-col span="24" style="text-align: left;padding:3px 0;">-->
                    <!--积分:{{val.integral}}分-->
                    <!--</van-col>-->
                  </van-row>
                </div>
              </van-col>
              <van-col span="6" style="padding:10px;">
                <van-row>
                  <van-col span="24" style="text-align: right;padding:5px 0;">
                    <span>X{{val.buynum}}</span>
                  </van-col>
                  <van-col span="24" style="text-align: right;padding:3px 0;">
                    <span :style="{color:color}">￥{{val.should_income}}</span>
                  </van-col>
                </van-row>
              </van-col>


            </van-row>


          </div>


          <!--退货-->
          <div v-else style="position: relative;overflow: hidden">
            <van-row>
              <van-col span="24" style="text-align:left;padding:5px 0 5px 10px;">
                {{val.tocollect.sale_date}}
              </van-col>
              <van-col span="24"
                       style="text-align:left;padding:0 0 3px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                消费分店:{{getDianCang(val.store_id).name}} 【{{val.tocollect.employee_name}}】
              </van-col>
              <van-col span="24"
                       style="text-align:left;padding:0 0 3px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                订单号:{{val.tocollect.order_num}}
              </van-col>
              <van-col span="6" style='padding-left:10px;padding-top:5px;text-align: left'>
                <img v-if="getGoods(val.sku_id).images.length==0" class="xfimgDiv" src="../../images/noimg.jpg" alt="">
                <img v-else class="xfimgDiv" :src="memberDetails.imgaes+getGoods(val.sku_id).images" alt="">

              </van-col>
              <van-col span="18" style='padding:0 10px;'>
                <van-row>
                  <van-col span="20" class="memberDetails-c2-names">
                    商品:{{getGoods(val.sku_id).goods.title}}
                  </van-col>
                  <van-col span="4" style="text-align: right;padding:3px 0;">
                    <span>X{{Math.abs(val.buynum)}}</span>
                  </van-col>
                  <van-col span="12" style="text-align: left;padding:3px 0;">
                    折扣:{{val.discount}}
                  </van-col>
                  <van-col span="12" style="text-align: right;padding:3px 0;">
                    <span style="color:red!important;">￥{{Math.abs(val.should_income)}}</span>
                  </van-col>
                  <van-col span="24"
                           style="text-align: left;padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    规格:【<span v-for="(item,v) in getGoods(val.sku_id).spec_data">{{v}}:{{item}} </span>】
                  </van-col>
                  <!--<van-col span="24" style="text-align: left;padding:3px 0;">-->
                    <!--积分:{{val.integral}}分-->
                  <!--</van-col>-->
                </van-row>
              </van-col>

            </van-row>
            <span class="tuiHuo">
              退货
            </span>
          </div>


        </div>
        <div class="noDatas" :style="{display:block}">
          数据已加载完
        </div>
      </van-list>


    </div>

    <div class="content3" :style="{display:contents3}">

      <p class="use-yhq">可用优惠券</p>
      <div style="padding:20px 0;">
        <van-list
          v-model="loading3"
          :finished="finished3"
          :offset="offset"
          @load="quanFn"
        >
          <div v-if="typeof quanList=='string'" style="color:#ddd;">{{quanList}}</div>
          <div v-else class="yhj" v-for="(item,index) in quanList" :key="index">
            <div class="yhj-c">
              <p>{{item.coupons.name}}</p>
              <p v-if="item.coupons.face_type==0">
                <span class="yhq-title">￥</span>
                <span class="yhq-title">{{parseInt(item.coupons.face_value)}}</span>
              </p>
              <p v-else>
                <span class="yhq-title">{{(parseFloat(item.coupons.face_value)).toFixed(1)}}折</span>
              </p>

            </div>
            <div class="right-c">
              <p v-if="item.coupons.doorsill!=0">满{{item.coupons.doorsill}}可用</p>
              <p v-else>无门槛使用</p>
              <p v-if="item.coupons.time_type==2">永久有效</p>
              <p v-else>{{item.start_time}} 到 {{item.end_time}}</p>
              <!--<p class="use_store">使用店仓: BD1、DAZZ专卖店</p>-->
            </div>
            <i></i>
          </div>
        </van-list>

      </div>

      <p style="border-top:1px solid #E3E3E4" class="use-yhq">不可用优惠券</p>
      <div style="padding:20px 0;">
        <van-list
          v-model="loading4"
          :finished="finished4"
          :offset="offset"
          @load="noUseFn"
        >
          <div v-if="quanListed.length==0" style="color:#ddd;">暂无优惠券</div>
          <div v-else class="yhj-ed" v-for="(item,index) in quanListed" :keys="index">
            <div class="yhj-c">
              <p>{{item.coupons.name}}</p>
              <p v-if="item.coupons.face_type==0">
                <span class="yhq-title">￥</span>
                <span class="yhq-title">{{parseInt(item.coupons.face_value)}}</span>
              </p>
              <p v-else>
                <span class="yhq-title">{{parseFloat(item.coupons.face_value).toFixed(1)}}折</span>
              </p>
            </div>
            <div class="right-c">
              <p v-if="item.coupons.doorsill!=0">满{{item.coupons.doorsill}}可用</p>
              <p v-else>无门槛使用</p>
              <p v-if="item.coupons.time_type==2">永久有效</p>
              <p v-else>{{item.start_time}} 到 {{item.end_time}}</p>
              <!--<p class="use_store">使用店仓: BD1、DAZZ专卖店</p>-->
            </div>
            <em v-if="item.coupons.status==1">已停用</em>
            <em v-else-if="item.use_status==1">已使用</em>
            <em v-else-if="item.guoqi==1">已过期</em>
          </div>
        </van-list>
      </div>
    </div>

    <div class="content4" :style="{display:contents4}">
      <van-list
        v-model="loading2"
        :finished="finished2"
        @load="vipFn"
      >
        <!--<van-loading color="black" v-model="loading5" class="content4-loading"/>-->
        <p class="use-yhq">可用会员卡</p>

        <div v-if="typeof vipCards=='string'" class="huiyuanFalse">
          <p>{{vipCards}}</p>
        </div>
        <!--旧版会员卡样式-->
        <!--<div v-else class="huiyuan" v-for="(val,index) in vipCards" :keyLi="index">-->
        <!--<div  class="huiyuan-top">-->
        <!--<van-row class="huiyuan-tText">-->
        <!--<van-col span="6" class="hyk-title" >VIP</van-col>-->
        <!--<van-col span="18" style="text-align:right;padding:0 10px;">-->
        <!--<span style="line-height: 30px;">{{val.tocard.card_name}}</span>-->
        <!--</van-col>-->
        <!--</van-row>-->
        <!--</div>-->
        <!--<div class="huiyuan-bottom">-->
        <!--<van-row style="margin:2px 0;">-->
        <!--<van-col span="5" style="text-align: right;">权&nbsp;&nbsp;&nbsp;&nbsp;益:</van-col>-->
        <!--<van-col span="19" style="text-align: left;">{{val.tocard.rate}}倍积分回馈</van-col>-->
        <!--</van-row>-->
        <!--<van-row  style="margin:2px 0;">-->
        <!--<van-col span="5" style="text-align: right;">有效期:</van-col>-->
        <!--<van-col span="19" style="text-align: left;">-->
        <!--<span v-if="val.tocard.effective_type==1">永久有效</span>-->
        <!--<span v-else-if="val.tocard.effective_type==2">{{val.tocard.valid_days}}天</span>-->
        <!--<span v-else-if="val.tocard.effective_type==3">-->
        <!--{{val.tocard.startdate}}到{{val.tocard.enddate}}-->
        <!--</span>-->
        <!--</van-col>-->
        <!--</van-row>-->
        <!--<em class="huiyuan-discount">{{val.tocard.discount}}折</em>-->
        <!--</div>-->
        <!--</div>-->

        <div v-else class="newcrad" v-for="(val,index) in vipCards" :key="index">
          <p class="cardName">{{val.tocard.card_name}}</p>
          <p class="quanyi">
            权益: {{val.tocard.rate}}倍积分回馈
          </p>
          <p class="qixian"> 有效期:
            <span v-if="val.tocard.effective_type==1">永久有效</span>
            <span v-else-if="val.tocard.effective_type==2">{{val.tocard.valid_days}}天</span>
            <span v-else-if="val.tocard.effective_type==3">
                {{val.tocard.startdate}}到{{val.tocard.enddate}}
              </span>
          </p>
          <span class="zhekou">{{val.tocard.discount}}折</span>
          <p class="clears"></p>
          <img src="../../images/viplogo.png" class="viplogo" alt="">
        </div>
      </van-list>
      <van-list
        v-model="loading5"
        :finished="finished5"
        @load="allVipFn"
      >
        <p class="use-yhq">不可用会员卡</p>
        <div v-if="vipCardsed.length==0" class="huiyuanFalse">
          <p>{{vipCardsedShow}}</p>
        </div>
        <!--旧版会员卡样式-->
        <!--<div v-else class="huiyuan2" v-for="(val,index) in vipCardsed" :keyLis="index">-->
        <!--<div  class="huiyuan-top">-->
        <!--<van-row class="huiyuan2-tText">-->
        <!--<van-col span="6" class="hyk-title" >VIP</van-col>-->
        <!--<van-col span="18" style="text-align:right;padding:0 10px;">-->
        <!--<span style="line-height: 30px;">{{val.tocard.card_name}}</span>-->
        <!--</van-col>-->
        <!--</van-row>-->
        <!--</div>-->
        <!--<div class="huiyuan-bottom">-->
        <!--<van-row style="margin:2px 0;">-->
        <!--<van-col span="5" style="text-align: right;">权&nbsp;&nbsp;&nbsp;&nbsp;益:</van-col>-->
        <!--<van-col span="19" style="text-align: left;">{{val.tocard.rate}}倍积分回馈</van-col>-->
        <!--</van-row>-->
        <!--<van-row  style="margin:2px 0;">-->
        <!--<van-col span="5" style="text-align: right;">有效期:</van-col>-->
        <!--<van-col span="19" style="text-align: left;">-->
        <!--<span v-if="val.tocard.effective_type==1">永久有效</span>-->
        <!--<span v-else-if="val.tocard.effective_type==2">{{val.tocard.valid_days}}天</span>-->
        <!--<span v-else-if="val.tocard.effective_type==3">-->
        <!--{{val.tocard.startdate}}到{{val.tocard.enddate}}-->
        <!--</span>-->
        <!--</van-col>-->
        <!--</van-row>-->
        <!--<i class="huiyuan2-discount">{{val.tocard.discount}}折</i>-->
        <!--<em>{{val.Reason}}</em>-->
        <!--</div>-->
        <!--</div>-->

        <!--新版会员卡样式-->
        <div v-else class="newcrad newcraded" v-for="(val,index) in vipCardsed" :key="index">
          <p class="cardName">{{val.tocard.card_name}}</p>
          <p class="quanyi">
            权益: {{val.tocard.rate}}倍积分回馈
          </p>
          <p class="qixian"> 有效期:
            <span v-if="val.tocard.effective_type==1">永久有效</span>
            <span v-else-if="val.tocard.effective_type==2">{{val.tocard.valid_days}}天</span>
            <span v-else-if="val.tocard.effective_type==3">
                {{val.tocard.startdate}}到{{val.tocard.enddate}}
              </span>
          </p>
          <span class="zhekou">{{val.tocard.discount}}折</span>
          <p class="clears"></p>
          <img src="../../images/viplogo2.png" class="viplogo" alt="">
          <em>{{val.Reason}}</em>
        </div>
      </van-list>


    </div>


    <!--返回按钮-->
    <van-button class="memberDetails-back" @click="onClickLeft">
      <i class="iconfont icon-icon_reply" style="display: block"></i>
      返回
    </van-button>


    <div class="footerBtn">
      <van-button :style="{background:color}" style="width:60%;padding:17px 0;line-height:0;border:0;" type="danger"
                  size="small" @click="phoneCall">
        打电话
      </van-button>
    </div>

  </div>
</template>

<script type="text/javascript">
  import {mapState} from 'vuex';
  export default {
    name: "memberDetails",
    data() {
      return {
        color: '#0D90EB',//主题色，字体色
        active: 0,
        active3: 0,
        vipId: 0,//会员id

        contents1: "block",
        content1Loading: "block",
        block: "none",
        jffxye: 0,
        widths: "33.33%",
        contents2: "none",
        contents3: "none",
        contents4: "none",
        tab: [
          {
            title: "基本信息"
          },
          {
            title: "消费记录"
          },
          {
            title: "优惠券"
          },
          {
            title: "会员卡"
          }
        ],
        label: "",
        memberInfo: "",
        integration: "",
        deposit: 0,
        vip_assets_czkje: 0,
        codeStatus: 1,
        reentry: 0,
        consumption: [],
        page: 1,
        pageSize: 10,
        currentPages: 1,
        consumptionStatus: 0,
        storeId: [],
        stores: "",//店仓
        xiaoFeiGoods: [],//消费的商品

        //优惠券
        quan: ["可使用", "已失效"],
        quanList: [],
        quanListed: [],
        quanClickNum: 0,
        quanDtatus1: 0,
        quanDtatus2: 0,
        pagesize: 50,
        coupons: [],
        disabledCoupons: [],
        diBu: false,
        nono: false,
        loading3: false,
        finished3: true,
        loading4: false,
        finished4: true,

        //会员卡
        vipCards: [],//可用会员卡
        vipCardsed: [],//可用会员卡
        vipCardPlay: 0,
        loading2: false,
        finished2: true,
        vipCardsedShow: "",

        loading: false,
        finished: true,
        offset: 10,

        loading5: false,
        finished5: true,

        //客服电话
        phone: "",
      }
    },
    watch: {
      active: function (val) {
        if (val == 0) {
          this.contents1 = "block";
          this.contents2 = "none";
          this.contents3 = "none";
          this.contents4 = "none";
        } else if (val == 1) {
          this.contents2 = "block";
          this.contents1 = "none";
          this.contents3 = "none";
          this.contents4 = "none";
          if (this.currentPages == 1) {
            // this.loading=true;
            this.finished = false;
            // this.consumptionFn();//消费记录
          }

        } else if (val == 2) {
          if (!this.quanClickNum) {
            this.coupons = [];
            this.disabledCoupons = [];
            this.finished3 = false;
            // this.quanFn2();
            this.finished4 = false;
          }
          this.contents3 = "block";
          this.contents1 = "none";
          this.contents2 = "none";
          this.contents4 = "none";
        } else {
          // this.vipFn();//会员卡
          this.contents4 = "block";
          this.contents1 = "none";
          this.contents2 = "none";
          this.contents3 = "none";
          this.loading2 = false;
          this.finished2 = false;
          this.loading5 = false;
          this.finished5 = false;
        }

      }
    },
    computed: {
      ...mapState({
        memberDetails: "data"
      })
    },
    methods: {
      //判断是否开通积分返现功能
      getMemberStatus() {
        var $this = this;
        this.$http.setting.get('/marke/statusall')
          .then(function (response) {
            // console.log(response.data.data);
            if (response.data.data.jffx == 0) {// 0 - 未开通 1 - 开通
              $this.codeStatus = 0;
            } else {
              $this.codeStatus = 1;
              // $this.getJiFen();
            }
          })
          .catch(function (error) {
            console.log(error);
          });

      },
      //获取积分返现余额
      getJiFen() {
        if (this.codeStatus == 1) {
          this.widths = "24%";
          var $this = this;
          this.$http.member.get('/fanxian/' + this.$store.state.data.memberID + '/lastRecord')
            .then(function (response) {
              // console.log(response.data.data);
              $this.jffxye = response.data.data;
              if ($this.jffxye > 10000) {
                $this.jffxye = (Math.round(($this.jffxye / 10000) * 100) / 100) + "万";
              }

            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          this.widths = "33.3%";
        }
      },
      onClickLeft() {
        // var urls=this.$route.params.url;

        this.$router.push({name: sessionStorage.getItem("path")});
        sessionStorage.setItem("vipId", "");
        sessionStorage.setItem("path", "");
        // console.log(this.$store.state.data.path);
      },
      //会员详情
      memberinfo() {
        //存入上一步的路劲
        this.$store.state.data.path = this.$route.params.url;

        if (this.$route.params.vipId) {
          sessionStorage.setItem("vipId", this.$route.params.vipId);
          sessionStorage.setItem("path", this.$route.params.url);
        }
        // console.log(sessionStorage.getItem("path"));
        // console.log(sessionStorage.getItem("vipId"));
        if (!this.memberInfo.id) {//判断是否有值
          var $this = this;
          $this.vipId = sessionStorage.getItem("vipId");
          this.$http.member.get('/vip/' + $this.vipId + '/info')
            .then(function (response) {
              if (!response.data.code) {
                $this.getJiFen()

                $this.memberInfo = response.data.data;
                $this.content1Loading = 'none'

                $this.deposit = ($this.memberInfo.deposit_cumu - $this.memberInfo.deposit_use).toFixed(2);
                $this.vip_assets_czkje = $this.memberInfo.vip_assets_czkje
                $this.jffxye = $this.memberInfo.fanxian

                if ($this.deposit > 10000) {
                  $this.deposit = (Math.round(($this.deposit / 10000) * 100) / 100) + "万";
                }
                //vip_assets_czksyje
                if (parseFloat($this.vip_assets_czkje) > 10000) {
                  $this.vip_assets_czkje = (Math.round(($this.vip_assets_czkje / 10000) * 100) / 100) + "万";
                }

                // var idx=$this.memberInfo.photo.indexOf("accessory");

                if ($this.memberInfo.photo == '') {
                  $this.memberInfo.photos = 1;
                } else {
                  $this.memberInfo.photos = 0
                  var timestamp = (new Date()).getTime();
                  $this.memberInfo.photo = $this.memberInfo.photo + '?c=' + timestamp

                }

                $this.$store.state.data.memberID = $this.memberInfo.id;
                $this.$store.state.data.yuE = $this.deposit;//余额
                $this.$store.state.data.cz_yuE = $this.vip_assets_czkje;//充值余额
                $this.$store.state.data.jffxye = $this.jffxye;//充值余额

                $this.$store.state.data.goodsBackPrice = response.data.data.rt_money_cumu;//累计退货金额
                $this.$store.state.data.growth = response.data.data.exp;//成长值
                //会员客服电话

                $this.phone = $this.memberInfo.phone;
                // console.log($this.memberInfo);
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
      //积分余额
      integrationFn() {
        var $this = this;
        this.$http.member.get('/integration/' + this.$store.state.data.memberID + '/lastRecord')
          .then(function (response) {
            $this.integration = response.data.data;
            $this.$store.state.data.jiFen = response.data.data;

          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //积分返现余额记录
      reappearanceFn() {
        this.$router.push({name: 'reappearance'});
      },
      pathIntegration() {
        this.$router.push({name: 'integration'});
      },
      balabceFn() {
        this.$router.push({name: 'balance'});
      },
      rechargeFn() {
        this.$router.push({name: 'recharge'});
      },
      growthFn() {
        this.$router.push({name: 'growth'});
      },
      phoneCall() {
        window.location.href = "tel:" + this.phone;
      },
      //消费记录
      consumptionFn() {

        var $this = this;
        this.$http.order.post('/saleinfo/vipsale', {
          page: $this.currentPages,
          pageSize: $this.pageSize,
          vip_id: $this.vipId
        })
          .then(function (response) {
            // console.log(response.data.data);
            $this.currentPages = response.data.data.current_page + 1;//获取当前的下一页

            if (!response.data.data.data.length) {
              $this.consumption = "暂无消费记录";
              $this.loading = false;
              $this.finished = true;
              return;
            }

            //追加商品id
            for (var i = 0; i < response.data.data.data.length; i++) {
              //换算折扣，保留一位小数
              response.data.data.data[i].sj_zk = parseInt(response.data.data.data[i].sj_zk).toFixed(1);

            }
            $this.itemFn(response.data.data);

            /*$this.pageSize=response.data.data.total;
            $this.page=Math.ceil(response.data.data.total/response.data.data.per_page);*/

          })
          .catch(function (error) {
            console.log(error);
          });

      },
      //筛选店仓名
      getDianCang(storesId) {
        var name = this.stores.filter(i => i.id == storesId);
        if (name.length) {
          return name[0]
        }
        return {
          name: ""
        }
      },
      getGoods(skuId) {

        var name = this.xiaoFeiGoods.filter(i => i.id == skuId);
        if (name.length) {
          return name[0]
        }
        return {
          title: "",
          spec_data: []
        }

      },
      //获取店铺
      getGoodsInfo() {
        var $this = this;
        this.$http.setting.get('store')
          .then(function (response) {
            //
            var empId = localStorage.getItem('empId')
            if (empId && response.data.code) {
              $this.$toast.fail('店仓' + response.data.message);
              $this.$router.go(-1)
              return;
            }
            // console.log(response.data.data);
            $this.stores = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //消费记录的商品详情
      itemFn(datas) {
        var $this = this;
        this.$http.item.get('item/search', {
          params: {
            item_ids: datas.data.map(i => i.sku_id)
          }
        })
          .then(function (response) {
            // console.log(datas.data);
            // console.log(response.data.data);

            for (let j = 0; j < response.data.data.data.length; j++) {
              $this.xiaoFeiGoods.push(response.data.data.data[j]);

            }

            for (let i = 0; i < datas.data.length; i++) {
              $this.consumption.push(datas.data[i]);
            }

            $this.loading = false;

            if ($this.consumption.length >= datas.total) {
              $this.finished = true;
              $this.block = 'block';
            }

          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //获取时间戳
      getDateTimes(strtime) {
        var date = new Date(strtime);
        // var times=date.getTime()/1000;

        var times = Date.parse(date);
        return times;
      },
      //查询可用优惠券
      quanFn() {
        this.quanClickNum++;
        var $this = this;
        //获取可用优惠券 status 0-已用的 1-未用的
        this.$http.member.post('/coupon/vip/list', {
          vip_id: $this.vipId,
          status: 0,
          pagesize: $this.pagesize
        })
          .then(function (response) {
            // console.log(response.data.data)
            if (!response.data.code) {
              var quanName = "";
              for (var i = 0; i < response.data.data.data.length; i++) {

                // if(!response.data.data[i].coupons.status){//判断是否停用
                //   $this.quanList.push(response.data.data[i]);
                // }
                var times = response.data.data.data[i].end_time.replace(/-/g, '/')//兼容ios
                var sjc = $this.getDateTimes(times);//优惠券的时间戳
                // $this.$toast(sjc);
                var timestamp = new Date().getTime();//当前的时间戳
                // 判断当前时间戳是否大于优惠券的时间戳
                if (timestamp < sjc || response.data.data.data[i].coupons.time_type == 2) {
                  // response.data.data.data[i].guoqi=1;
                  $this.quanList.push(response.data.data.data[i]);
                } else if (timestamp > sjc) {
                  response.data.data.data[i].guoqi = 1;
                  $this.quanListed.push(response.data.data.data[i]);
                }

              }

              // console.log($this.quanList)
              if (!$this.quanList.length) {

                $this.quanList = "暂无优惠券";
              }
              $this.loading3 = false;
              $this.finished3 = true;

            }


          })
          .catch(function (error) {
            console.log(error);
          });


      },
      //查询不可用优惠券(已失效,过期)   ---原版本
      quanFn2() {
        //获取已失效的优惠券
        var $this = this;
        // this.$http.member.post('/coupon/vip/validcoupon',{
        this.$http.member.post('/coupon/vip/list', {
          vip_id: $this.vipId,
          status: 0,
          pagesize: $this.pagesize
        })
          .then(function (response) {
            if ($this.quanListed.length > 0) {
              $this.quanDtatus2 = 1;
            }

            var quanName = "";

            // console.log(response.data.data);
            for (var i = 0; i < response.data.data.data.length; i++) {
              //非永久性优惠券(过期的)
              if (response.data.data.data[i].coupons.time_type != 2 && response.data.data.data[i].coupons.status == 0) {
                var sjc = $this.getDateTimes(response.data.data.data[i].end_time);//优惠券的时间戳
                var timestamp = new Date().getTime();//当前的时间戳

                if (timestamp > sjc) {
                  response.data.data.data[i].guoqi = 1;
                  $this.quanListed.push(response.data.data.data[i]);
                }

              } else if (response.data.data.data[i].coupons.status == 1) {//已停用的
                $this.quanListed.push(response.data.data.data[i]);
              } else if (response.data.data.data[i].coupons.status == 0 && response.data.data.data[i].use_status == 1) {

                $this.quanListed.push(response.data.data.data[i]);
              }

            }
            $this.loading4 = false;
            $this.finished4 = true;
            // console.log($this.quanListed);

            // console.log($this.disabledCoupons);
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //获取已失效，已过期的优惠券
      quanFn3() {
        var $this = this;
        this.$http.member.post('/coupon/vip/list', {
          vip_id: $this.vipId,
          status: 0,
          pagesize: $this.pagesize
        })
          .then(function (response) {
            // console.log(response.data.data)
            if ($this.quanListed.length > 0) {
              $this.quanDtatus2 = 1;
            }
            var quanName = "";
            // console.log(response.data.data);
            for (var i = 0; i < response.data.data.data.length; i++) {

              //非永久性优惠券(过期的)
              if (response.data.data.data[i].coupons.time_type != 2 && response.data.data.data[i].coupons.status == 0) {
                var sjc = $this.getDateTimes(response.data.data.data[i].end_time);//优惠券的时间戳
                var timestamp = new Date().getTime();//当前的时间戳
                // 判断当前时间戳是否大于优惠券的时间戳
                if (timestamp > sjc) {
                  response.data.data.data[i].guoqi = 1;
                  $this.quanListed.push(response.data.data.data[i]);
                }

              } else if (response.data.data.data[i].coupons.status == 1) {//已停用的
                $this.quanListed.push(response.data.data.data[i]);
              }
            }
            // console.log($this.quanListed)
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //获取已使用的优惠券
      quanFn4() {
        var $this = this;
        this.$http.member.post('/coupon/vip/list', {
          vip_id: $this.vipId,
          status: 1,
          pagesize: $this.pagesize
        })
          .then(function (response) {
            // console.log(response.data.data)
            if ($this.quanListed.length > 0) {
              $this.quanDtatus2 = 1;
            }

            // console.log(response.data.data);
            for (var i = 0; i < response.data.data.data.length; i++) {


              response.data.data.data[i].guoqi = 0;
              $this.quanListed.push(response.data.data.data[i]);
            }

          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //综合获取不可用的优惠券
      noUseFn() {
        // this.quanFn3();
        this.quanFn4();
        this.loading4 = false;
        this.finished4 = true;
      },
      //查询可用会员卡
      vipFn() {
        if (!this.vipCardPlay) {
          var $this = this;
          this.$http.member.get('/viphascard/' + $this.vipId + "/4/showCard")
            .then(function (response) {
              // console.log(response.data);

              if (response.data.data.length > 0) {
                $this.vipCards = response.data.data;
              } else {
                $this.vipCards = "暂无会员卡";
              }
              $this.loading2 = false;
              $this.finished2 = true;
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          this.loading2 = false;
        }
      },
      //查询已过期的会员卡
      vipFn2() {
        var $this = this;
        this.$http.member.get('/viphascard/' + $this.vipId + "/2/showCard")
          .then(function (response) {
            // console.log($this.vipCardsed)
            for (var i = 0; i < response.data.data.length; i++) {
              response.data.data[i].Reason = "已过期";

              $this.vipCardsed.push(response.data.data[i]);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //查询已禁用的会员卡
      vipFn3() {
        var $this = this;
        this.$http.member.get('/viphascard/' + $this.vipId + "/5/showCard")
          .then(function (response) {
            // console.log(response.data.data);
            for (var i = 0; i < response.data.data.length; i++) {
              response.data.data[i].Reason = "已禁用";
              $this.vipCardsed.push(response.data.data[i]);
            }

            if (!$this.vipCardsed.length) {
              $this.vipCardsedShow = "暂无会员卡";
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      //综合获取会员卡
      allVipFn() {
        if (!this.vipCardPlay) {
          // this.vipFn();
          this.vipFn2();
          this.vipFn3();
          this.vipCardPlay = 1;
          this.loading5 = false;
          this.finished5 = true;
        } else {
          this.loading5 = false;
        }
      },

    },
    mounted() {
      // console.log(area)
      this.memberinfo();
      this.integrationFn();
      // this.getMemberStatus();
      this.getGoodsInfo();//获取店铺

    }
  }
</script>
<style type="text/css">

  .memberDetails {
    font-size: 16px !important;
    color: #666;
    font-family: 微软雅黑;
  }

  .memberDetails-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    font-size: 18px !important;
    /*font-weight: bold;*/
  }

  .van-tab--active {
    color: #1292EB;
  }

  .van-tabs__line {
    background-color: #1292EB;
  }

  /* 滚动切换的容器*/
  .memberDetails-switch {
    position: fixed;
    top: 200px;
    left: 0;
    /*border:1px solid blue;*/
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9;

  }

  .memberDetails .van-cell {
    font-size: 14px !important;
    color: #666;
  }

  .yhq {
    width: 100%;
    -height: 50px;
    display: flex;
    margin: 5px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 5px 0;

  }

  .yhqNo {
    margin-top: 20px;
  }

  .yhqNo > p {
    margin: 10px 0;
    color: #ddd;
  }

  .yhqEd {
    color: #ccc;
  }

  .yhqEd > .leftYhj {
    background: #BFB7B7 !important;
  }

  .yhq > .leftYhj {
    width: 30%;
    height: 100%;
    background: red;
    color: #fff;
    padding: 20px 0;
  }

  .yhq > .rightYhj {
    width: 70%;
    height: 100%;
    text-align: left;
    padding: 5px;
    box-sizing: border-box;
  }

  .yhq > .rightYhj > p {
    margin: 0;
  }

  .wu > p {
    text-align: center;
    color: #ccc;

  }

  .tuiHuo {
    display: block;
    position: absolute;
    top: 0px;
    right: 15px;
    border: 1px solid red;
    border-radius: 3px;
    color: red;
    padding: 2px 15px;
    background: #fff;
    transform: rotate(30deg);
    font-size: 18px;
  }

  .huiyuan {
    margin: 10px auto;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    width: 80%;
    overflow: hidden;
    border: 1px solid #3C8DBC;
  }

  .huiyuan-top {
    position: relative;
    height: 55px;
    overflow: hidden;
  }

  .huiyuan-tText {
    padding: 10px 0;
    background: #3C8DBC;
    border-bottom: 5px dotted white;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }

  .huiyuan-bottom {
    padding: 10px;
    background: #fff;
    color: #888;
    position: relative;
  }

  .huiyuan-discount {
    position: absolute;
    right: 15px;
    bottom: 30px;
    font-size: 16px;
    font-weight: bold;
    color: red;
  }

  .huiyuan2 {
    /*padding:10px 20px;*/
    margin: 10px auto;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    width: 80%;
    position: relative;
    overflow: hidden;
    border: 1px solid #B4B9C0;
  }

  .huiyuan2-tText {
    padding: 10px 0;
    background: #B4B9C0;
    border-bottom: 5px dotted white;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }

  .huiyuan2-discount {
    position: absolute;
    right: 15px;
    bottom: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #B4B9C0;
  }

  .huiyuan2 em {
    width: 60px;
    position: absolute;
    right: 15%;
    top: -10px;
    color: #000;
    border: 1px solid;
    border-radius: 2px;
    -webkit-transform: rotate(-30deg);
    transform: rotate(30deg);
    font-style: initial;
  }

  .hyk-div {
    padding: 10px 0;
    margin: 10px auto;
    border-radius: 5px;
    background: #63B359;
    position: relative;
    height: 120px;
    color: #fff;
    width: 300px;
  }

  .huiyuanFalse {
    color: #ccc;
    overflow: hidden;
  }

  .content1 {
    margin-top: 44px;
    margin-bottom: 40px;
    display: none;
    position: relative;
    z-index: 8 !important;
    font-size: 16px !important;
    /*font-weight: bold;*/
  }

  .content1Loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(255, 255, 255, .5);
  }

  .content1-loading {
    position: absolute !important;
    top: 30%;
    left: 45%;
    z-index: 99999;
  }

  .van-tab {
    font-size: 14px !important;
  }

  .content1 .list-p {
    margin: 10px 0;
    font-size: 16px !important;
    text-align: left;
  }

  .content1 .list-p .iconfont {
    font-size: 12px !important;
    color: #666;
  }

  .content1 .list-p .icon-huiyuanshengritixing, .icon-yonghu1 {
    font-size: 14px;
  }

  .van-cell__title {
    text-align: left;

  }

  .content2 {
    display: none;
    font-weight: 400;
    font-size: 14px !important;
    margin-bottom: 40px;
    margin-top: 44px !important;
    padding: 3px 5px;
    /*background: #fff!important;*/
  }

  .content2 .van-col > p {
    font-size: 12px !important;
  }

  .content3 {
    display: none;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 40px;
    margin-top: 44px !important;
    background: #fff !important;
  }

  .content4 {
    display: none;
    margin-bottom: 40px;
    margin-top: 44px;
    padding: 0 10px 10px 10px;
    background: #fff !important;
    position: relative;
  }

  .content4-loading {
    margin: 0 auto;
    position: absolute;
    top: 40%;
    left: 45%;
  }

  .content3 .van-tabs__wrap {
    top: 44px;
  }

  .content3 .yhjPage3 {
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 40px;
    left: 0;
  }

  .content3 .van-tabs--line {
    padding-top: 25px;
  }

  .content3 .tabss3 > div {
    width: 50%;
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
  }

  .content3 .tabss3 > div:first-child {
    border-bottom: 1px solid #7FA02E;
    color: #7FA02E;
  }

  .icon-ly_huiyuanka {
    font-size: 30px;
  }

  .ka-p {
    text-align: left;
    margin: 5px 0;
  }

  .footerBtn {
    padding: 5px 0;
    width: 100% !important;
    /*height:30px!important;*/
    z-index: 9999 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    background: #fff !important;
  }

  .van-button--bottom-action {
    line-height: 30px !important;
  }

  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999 !important;
    width: 100%;
  }

  .van-tabs__wrap {
    top: 0;
    position: fixed;
  }

  .content3 .van-tabs {
    width: 100%;

  }

  .lists {
    /*border:1px solid #ddd;*/
    border-radius: 3px;
    margin: 10px 0;
    background: #fff;
  }

  .xfimgDiv {
    width: 75px;
    height: 92px;
  }

  .xfimgDiv > p {
    background: rgba(0, 0, 0, .5);
    margin: 0;
    height: 100%;
    color: #fff !important;
    line-height: 100px;
  }

  .list-pFirst {
    position: absolute;
    top: -15px;
    left: 5px;
    text-align: left;
  }

  .list-pFirst > span {
    float: right;
  }

  .guiGe {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .list-pTop {
    margin-top: 30px;
    margin-bottom: 0;

    text-align: left;
  }

  .van-tag--primary {
    margin: 3px;
  }

  .content1 .imgDiv {
    border-radius: 50%;
    width: 70px;
    height: 70px;
    position: relative;
    text-align: center;
    -line-height: 85px;
    border: 1px solid #ddd;
    overflow: hidden;

  }

  .content1 .imgIcons {
    font-size: 24px;
    line-height: 60px;
    margin-left: 10%;
  }

  .parentTab {
    display: flex;
    border-top: 1px solid #ddd;
    padding: 10px 0;
    background: #fff;
    font-size: 16px;
  }

  .one {
    width: 20%;
    border-right: 1px solid #ddd;
  }

  .one p {
    font-size: 12px !important;
    margin: 5px 0;
  }

  .lastOne {
    border-right: 0;
  }

  .memberDetails-back {
    position: fixed !important;
    bottom: 100px !important;
    right: 10px !important;
    background: rgba(0, 0, 0, .5) !important;
    width: 55px !important;
    height: auto !important;
    color: #fff !important;
    font-size: 12px !important;
    padding: 12px 0 !important;
    border-radius: 5px !important;
    line-height: initial !important;
    border: 0 !important;
    z-index: 9999 !important;
  }

  .memberDetails-back .iconfont {
    font-size: 12px;
  }

  .memberDetails .van-coupon-list__list {
    padding: 0 !important;
    /*margin-top:15px;*/
  }

  .memberDetails .van-coupon-list__list:first-child {
    padding-top: 15px !important;
    /*margin-top:15px;*/
  }

  .memberDetails .use-yhq {
    color: #999;
    margin: 0;
    padding: 10px 0;
    /*font-size: 14px;*/
    position: relative;
    text-align: center;
    font-weight: bold;
  }

  .vip_crad {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #fff;
    font-size: 24px;
    font-style: initial;
  }

  /*优惠券*/
  .yhj {
    width: 100%;
    height: 100px;
    display: flex;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    margin: 5px 0;
    background: #FF4444;
  }

  .yhj-c {
    width: 30%;
    height: 100%;
    padding: 10px 0;
    color: white;
    position: absolute;
    top: 0;
    left: -2px;
    border-left: 5px dotted white;
    border-right: 2px dashed rgba(255, 255, 255, .3);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .yhj-c p {
    font-size: 16px;
    margin: 8px 0;
  }

  .yhj i {
    position: absolute;
    right: -53px;
    top: 45px;
    height: 190px;
    width: 390px;
    background-color: rgba(255, 255, 255, .15);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }

  .right-c {
    width: 65%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 32%;
    padding: 0 10px;
    color: #fff;
    text-align: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .right-c p {
    margin: 10px 0;
  }

  .right-c .use_store {

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .yhj-ed {
    width: 100%;
    height: 100px;
    display: flex;
    border-radius: 3px;
    font-size: 12px;
    box-sizing: border-box;
    background: #B4B9C0;
    position: relative;
    overflow: hidden;
    margin: 5px 0;
    color: #B4B9C0;
  }

  .yhj-ed em {
    width: 60px;
    position: absolute;
    right: 5%;
    top: 10px;
    color: #000;
    border: 1px solid;
    border-radius: 2px;
    -webkit-transform: rotate(-30deg);
    transform: rotate(30deg);
    font-style: initial;
  }

  .xf-text {
    display: inline-block;
    padding: 0 10px;
    width: 70%;
  }

  .memberDetails-title {
    font-size: 16px;
    background: #FAFAFA !important;
    text-align: left;
    padding: 5px;
    color: #ccc;
  }

  .memberDetails-c2-names {
    text-align: left;
    padding: 5px 0;
    color: #000;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .yhq-title {
    font-size: 24px;
    font-weight: bold
  }

  .hyk-title {
    width: 25%;
    font-size: 16px;
    font-weight: bold
  }

  /*新会员卡样式*/
  .newcrad {
    width: 95%;
    padding: 10px 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #FED430;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    color: #000;
    margin: 10px auto;
  }

  .newcraded {
    background: #CCCCCC;
    color: #858585;
  }

  .newcraded .zhekou {
    background: #808080;
  }

  .newcraded em {
    width: 1.5rem;
    position: absolute;
    right: 36%;
    top: 20px;
    color: #000;
    border: 1px solid;
    border-radius: 0.05rem;
    -webkit-transform: rotate(-30deg);
    transform: rotate(30deg);
    font-style: initial
  }

  .cardName {
    text-align: left;
  }

  .quanyi, .qixian {
    font-size: 12px;
    text-align: left;
  }

  .zhekou {
    padding: 2px 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-size: 12px;
    text-align: left;
    display: inline-block;
    float: left;
  }

  .clears {
    clear: both;
  }

  .viplogo {
    position: absolute;
    top: 20px;
    right: 0;
    width: 120px;
    height: 70px;
  }
</style>
